<template>
  <div>
    <el-form ref="elForm" :model="query" :rules="rules" size="medium" label-width="100px"
             label-position="left" style="margin: 20px 80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="申请类型" prop="jrProductType">
            <el-select v-model="query.jrProductType" placeholder="请选择申请类型" clearable :style="{width: '80%'}">
              <el-option v-for="(item, index) in jrProductTypeOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请状态" prop="applyState">
            <el-select v-model="query.applyState" placeholder="请选择申请状态" clearable :style="{width: '80%'}">
              <el-option v-for="(item, index) in applyStateOptions" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="查询日期" prop="startDate">
            <el-date-picker v-model="query.startDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '80%'}" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="20px" label="至" prop="endDate">
            <el-date-picker v-model="query.endDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '80%'}" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item size="large" style="float: right">
        <el-button type="warning" @click="submitForm">查询</el-button>
        <el-button @click="resetForm">清空</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%;margin: 10px 30px;">
      <el-table-column
        width="205px"
        prop="applyOrderNo"
        label="申请合同号">
      </el-table-column>
      <el-table-column
        width="230px"
        prop="loanMessage"
        label="贷款信息	">
      </el-table-column>
      <el-table-column
      label="申请类型	">
        <template slot-scope="scope">
          <span v-if="scope.row.jrProductType == 1">租房分期</span>
          <span v-if="scope.row.jrProductType == 2">收房贷</span>
          <span v-if="scope.row.jrProductType == 3">应收租约保理</span>
        </template>
      </el-table-column>
      <el-table-column
        label="借款金额	">
        <template slot-scope="scope">
          {{scope.row.loanAmount+0}}元
        </template>
      </el-table-column>
      <el-table-column
        label="借款期限	">
        <template slot-scope="scope">
          {{scope.row.monthLimit+0}}个月
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="申请日期	">
      </el-table-column>
      <el-table-column
        prop="companyName"
        label="资金方">
      </el-table-column>
      <el-table-column
        label="申请状态	">
        <template slot-scope="scope">
          <span v-if="scope.row.applyState == 1">待审核</span>
          <span v-if="scope.row.applyState == 2">初审通过(待复审)</span>
          <span v-if="scope.row.applyState == 3">初审不通过</span>
          <span v-if="scope.row.applyState == 4">复审通过</span>
          <span v-if="scope.row.applyState == 5">复审不通过</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="auditMemo"
        label="驳回原因">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click="detail(scope.$index, scope.row)"
            type="text"
            size="small">
            <span v-if="scope.row.applyState == 1 || scope.row.applyState == 2">审核</span>
            <span v-else>查看</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right; margin: 10px 10px 30px 10px"
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="this.total">
    </el-pagination>
  </div>
</template>
<script>
import {page} from "@/api/banking/applicationscheck/applicationscheck";

export default {
  components: {},
  props: [],
  data() {
    return {
      tableData: [],
      query: {
        jrProductType: undefined,
        applyState: undefined,
        startDate: null,
        endDate: null,
        current: 1,
        size: 10,
      },
      total: undefined,
      rules: {
        jrProductType: [],
        applyState: [],
        startDate: [],
        endDate: [],
      },
      jrProductTypeOptions: [{
        "label": "租房分期",
        "value": 1
      }, {
        "label": "收房贷",
        "value": 2
      }, {
        "label": "应收租约保理",
        "value": 3
      }],
      applyStateOptions: [{
        "label": "待审核",
        "value": 1
      }, {
        "label": "初审通过(待复审)",
        "value": 2
      }, {
        "label": "初审不通过",
        "value": 3
      }, {
        "label": "复审通过",
        "value": 4
      }, {
        "label": "复审不通过",
        "value": 5
      }],
    }
  },
  methods: {
    detail(index, row){
      if(row.jrProductType == 1){
        this.$router.push("/banking/check/installment/"+row.id)
      }
      if(row.jrProductType == 2){
        this.$router.push("/banking/check/collectmortgage/"+row.id)
      }
      if(row.jrProductType == 3){
        this.$router.push("/banking/check/leasefactoring/"+row.id)
      }
    },
    page() {
      page(this.query).then(res=>{
        console.log("分页",res);
        this.tableData = res.msgData.records;
        this.total = res.msgData.total;
      })
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        this.page();
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.current =val;
      this.page();
    },
  },
  created() {
    this.page();
  },
}

</script>
<style>
</style>
